<template>
  <view class="x-srcoll-swiper margin-top-xl"  @touchmove="srcollMove"  @touchstart="srcollStart" @touchend="srcollEnd">
     <view class="x-srcoll-swiper-item"  v-for="(item, index) in swiperList" :key="index" :style="[{'--mLeft': item.marginLeft + 'px'}]">
            <image style="border-radius: 10px;" class="hw-128" :src="item.url"  mode="scaleToFill" /> 
     </view>
  </view>
</template>
<script setup lang="ts">
import {ref, reactive, onMounted, computed} from "vue"

const systemInfo = uni.getSystemInfoSync()
const screenWidth = systemInfo.screenWidth



const imgWidth = ref(128)
const marginlLeft = ref(7)
const towerStart = ref(0)
const maxScrollInstall = ref(0)

const swiperList = reactive<any>([
    {id: 0,type: 'image',url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big84000.jpg'},
    {id: 1,type: 'image',url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big37006.jpg',}, 
    {id: 2,type: 'image',url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big39000.jpg'}, 
    {id: 3,type: 'image',url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big10001.jpg'}, 
    {id: 4,type: 'image',url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big25011.jpg'}, 
    {id: 5,type: 'image',url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big21016.jpg'}, 
    {id: 6,type: 'image',url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big99008.jpg'}
])





// 滑动开始
function srcollStart(event: any){
    towerStart.value = event.touches[0].pageX
}

// 滑动
function srcollMove(event: any){
  let instance = event.touches[0].pageX - towerStart.value
  let slidingSpeed =Math.abs(instance / 5);
  // 大于0，图片后退
  if(instance > 0){
    if(swiperList[0].marginLeft + slidingSpeed >= marginlLeft.value){
         initFn()
         return;
    }
    for(let i = 0; i < swiperList.length; i++){
        swiperList[i].marginLeft =  swiperList[i].marginLeft + slidingSpeed
    }

  }else{
      if( swiperList[0].marginLeft +  (-1) * slidingSpeed <= maxScrollInstall.value ){
        let width = imgWidth.value
        let interval = marginlLeft.value
        for(let i = 0; i < swiperList.length; i++){
             swiperList[i].marginLeft = ( i * width +  (i + 1) * interval ) +   maxScrollInstall.value
        }    
          return
      }
      
      for(let i = 0; i < swiperList.length; i++){
            swiperList[i].marginLeft =  swiperList[i].marginLeft + ( (-1) * slidingSpeed)
      }
  }

}
// 滑动结束
function srcollEnd(event: any){
     
}



function initFn(){
    let width = imgWidth.value
    let interval = marginlLeft.value
    for(let i = 0; i < swiperList.length; i++){
      swiperList[i].marginLeft = i * width +  (i + 1) * interval
    }
}

onMounted(() => {
     initFn()
    //  console.log(swiperList)
    let totalWidth = (imgWidth.value * swiperList.length) + (marginlLeft.value * swiperList.length)
    maxScrollInstall.value = (totalWidth - screenWidth) * (-1)
})

</script>
<style lang="scss" scoped>
.x-srcoll-swiper{
    position: relative;
}

.x-srcoll-swiper-item{
    position: absolute;
    top: 0;
    left: 0;
    transition: all 0.5s ease-in 0s;


    margin-left: var(--mLeft);
}
</style>
